<template>
    <div class="main-body">
        <el-row style="margin: 10px 0px 5px 0px;">
            <el-col :span="4" >
                <el-input placeholder="请输入权限名" v-model="query.menuName" class="input-with-select">
                    <el-button slot="append" @click="loadData" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="20" style="padding: 0px 0px 0px 10px" >
                <el-button @click="openAdd()" icon="el-icon-plus" plain>添加权限</el-button>
                <el-button @click="openEdit()" icon="el-icon-edit" type="primary" plain>修改权限</el-button>
                <el-button @click="remove()" icon="el-icon-delete" type="danger" plain>删除权限</el-button>
            </el-col>
        </el-row>


                <el-table
                        border stripe highlight-current-row header-cell-class-name="t_h_cell" class="data-table"
                        :data="tableData.rows" row-key="id"
                        :v-loading="authGroupLoading"
                        :height=dataTableHeight ref="tableRef"
                        @row-click="checkRow" >
                    <el-table-column  type="index"
                                      :index="indexData" width="40">
                    </el-table-column>

                    <el-table-column  :width="200" :show-overflow-tooltip="true"
                                      prop="authName" label="权限名称">
                    </el-table-column>

                    <el-table-column :width="100"  :show-overflow-tooltip="true"
                                      prop="authType" label="类型">
                        <template  slot-scope="scope">
                                <template v-for="(item) in authTypeEnum">
                                    <span v-if="scope.row.authType===item.id">{{item.name}}</span>
                                </template>
                        </template>
                    </el-table-column>

                    <el-table-column :width="100"  :show-overflow-tooltip="true"
                                     prop="isEnable" label="启用状态">
                        <template  slot-scope="scope">
                            <el-tag v-if="scope.row.isEnable" type="success" >启用</el-tag>
                            <el-tag v-if="!scope.row.isEnable" type="danger">停用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column   :show-overflow-tooltip="true"
                                       prop="id" label="操作">
                        <template  slot-scope="scope">
                            <el-link type="primary" @click="loadMenuData(scope.row.id)">查看权限</el-link>
                        </template>
                    </el-table-column>

                </el-table>
        <table-pager :loading.sync="loading" :size.sync="tableData.size" :page.sync="tableData.page" :total.sync="tableData.total"
                     @loadData="loadData"></table-pager>




        <el-drawer
                :style="{width:'100%',height:this.dataTableHeight+100+'px',top:'0px'}"
                title="用户权限"
                :withHeader="false"
                :modal="true" :size='600'
                :visible.sync="drawer"
                :direction="direction">

            <el-table
                    border stripe  header-cell-class-name="t_h_cell" class="data-table"
                    :data="rows" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    :v-loading="loading"     default-expand-all
                    :height=dataTableHeight+100 ref="tableRef"
            >

                <el-table-column  :width="220" :show-overflow-tooltip="true"
                                  prop="menuName" label="菜单名称">
                </el-table-column>

                <el-table-column   :show-overflow-tooltip="true"
                                   prop="id" label="操作权限">
                    <template  slot-scope="scope">
                        <span v-for="(optItem) in scope.row.operations">{{optItem.optName}} | </span>
                    </template>
                </el-table-column>

            </el-table>

        </el-drawer>

        <auth_edit :visible.sync="editVisible"
                        @loadData="loadData"  ref="editRef"  ></auth_edit>
    </div>
</template>

<script>
    import auth_edit from './auth_edit.vue'
    export default {
        name:'auth_main',
        components: {
            auth_edit,
        },
        data() {
            return {
                query:{},
                offsetHeight:50,
                dataTableHeight:400,
                currentRow:null,
                editVisible:false,
                loading:false,
                isSort:false,
                authTypeEnum:this.$constant.authTypeEnum,

                drawer:false,
                direction: 'rtl',

                authGroupLoading:false,
                tableData: {
                    rows:[
                    ],
                    page:1,
                    size:20,
                    total:0
                },

                rows:[
                ],
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(function () {
                this.dataTableHeight = window.innerHeight - this.$refs.tableRef.$el.offsetTop - this.offsetHeight;
            });
            this.loadData();
        },
        methods: {

            checkRow(row){
                //this.drawer=true;
                this.currentRow=row;
                //this.loadMenuData(row.id);
            },

            groupDataChange(val){
                this.currentRow = val;
                this.loadMenuData(this.currentRow.id);
            },

            indexData(index){
                return index+1;
            },

            async loadData(){
                let _this=this;
                let url='/auth/dataPager';
                _this.loading=true;
                await _this.$http.post(url,_this.query).then(function(res){
                    if(res.data.success){
                        _this.tableData=res.data.data;
                    }else{
                        _this.$message.error('获取数据错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                    }
                },function(){
                    _this.$message.error('获取数据错误！');
                });
                _this.loading=false;
            },

            async loadMenuData(authID){
                this.drawer=true;
                let _this=this;
                let url='/auth/getAuthMenu/'+authID;
                _this.loading=true;
                await _this.$http.post(url,_this.query).then(function(res){
                    if(res.data.success){
                        _this.rows=res.data.data;
                    }else{
                        _this.$message.error('获取数据错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                    }
                },function(){
                    _this.$message.error('获取数据错误！');
                });
                _this.loading=false;
            },

            openAdd(){
                this.editVisible=true;
                this.$refs.editRef.initData();
            },
            openEdit(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    _this.editVisible=true;
                    _this.$refs.editRef.loadData(this.currentRow);
                }
            },
            remove(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    let url="/auth/delete";
                    let params={id:_this.currentRow.id};
                    _this.$confirm("确定删除数据", '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        //删除数据
                         _this.$http.post(url,params).then(function(res){
                            if(res.data.success){
                                _this.$message.success("操作成功");
                                _this.loadData();
                            }else{
                                _this.$message.error('操作错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                            }
                        },function(){
                            _this.$message.error('操作错误！');
                        });
                    });
                }
            },
        },

        filters: {

        },
        watch:{
            '$store.state.clientHeight':function(clientHeight){
                let _this=this;
                setTimeout(function (){
                    _this.dataTableHeight = clientHeight - _this.$refs.tableRef.$el.offsetTop - _this.offsetHeight;
                },200)
            }
        }
    }

</script>
